<style>
	body{
		background-color: #F4F5F7;
	}
	.back{
		color: #343434;
		background-color: #FFF;
		padding: 0 20px;
		position: relative;
		height: 66px;
	}
	.btn{
		width: 50px;
		height: 66px;
		line-height: 66px;
		font-size: 15px;
		text-align: center;
		transition: color .1s;
	}
	.btn:hover,.btn_set{
		color: #00A1D6;
	}
	.bar{
		position: absolute;
		left: 30px;
		bottom: 0;
		width: 30px;
		height: 3px;
		background-color: #00A1D6;
		transition: left .2s cubic-bezier(0, 0.4, 0.4, 1);
		transform: translateZ(0);
	}
	.btn_list{
		z-index: 1;
		display: flex;
		position: absolute;
	}
</style>
<div class="back">
	<div class="bar"></div>
	<div class="btn_list">
		<div class="btn btn_set">主页</div>
		<div class="btn">动态</div>
		<div class="btn">投稿</div>
	</div>
</div>
<script>
	var bar=document.querySelector(".bar");
	var set_bar=function(index){
		bar.style.left=`${30+index*50}px`;
	};
	var btn_list=document.querySelectorAll(".btn");
	var saveIndex=0;
	var set_btn=function(index){
		btn_list[saveIndex].className="btn";
		saveIndex=index;
		btn_list[saveIndex].className="btn btn_set";
		set_bar(index);
	}
	btn_list.forEach((btn,index)=>{
		btn.onclick=function(){
			set_btn(index);
		};
		btn.onmouseenter=function(){
			set_bar(index);
		};
		btn.onmouseleave=function(){
			set_bar(saveIndex);
		};
	});
</script>